<template>
  <div class="header">
    <el-button
      icon="el-icon-back"
      size="medium"
      type="text"
      @click="btnLeave"
      >返回
    </el-button>
    <div class="spread"></div>
    <span class="title">{{ title }}</span>
  </div>
</template>

<script>
export default {
  name: "BackHeader",
  props: {
    title: {
      type: String,
      default: "",
    },
    needConfirm: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    leaveConfirm() {
      return this.$confirm(
        `离开当前页面不会保存已填写内容，是否离开？`,
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
        }
      )
        .then(() => true)
        .catch(() => false);
    },
    async btnLeave() {
      if (this.needConfirm) {
        let res = await this.leaveConfirm();
        if (!res) return;
      }
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  height: 30px;
  display: flex;
  align-items: center;
  .title {
    font-weight: 700;
    color: #2d2d2d;
    font-size: 18px;
  }
  .spread {
    width: 0;
    height: 20px;
    border: 1px solid #d8d8d8;
    margin: 0 16px;
  }
}
</style>
